
.main{
    width:80%;
    text-align: center;
    margin:auto;
}

.main .carousel{

    margin-top:20px;
}
.main .carousel-item{
    height:300px;
}

.carousel-item img{
    height: 100%;
}



.kindBox{
    width: 100%;

}

.titleBox{
    margin-top:100px;

}

.titleBox .title{
    flex:1;
}

.titleBox .title img{
    height: 130px;
    width: 130px;

    border-radius: 50%;
}

.kindBox .titleBox{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom:2px solid palevioletred;
}

.titleBox > .title{
    padding:8px;
}

.kindBox .petBox{
    display: flex;
    flex-wrap: wrap;

    margin-bottom: 100px;

}

.petBox > .pet{
    padding:8px;
    width:25%;
}

.petImg img{
    width: 150px;
    height: 150px;
}

.main .carousel-inner{
    margin-top:20px;
}

.typeBox{
    margin-top: 20px;
}

.typeBox img{
    width: 150px;
    height: 150px;
}

.typeBox .type img{
    border-radius: 50%;
}

.typeBox .type{
    position: relative;

    border-bottom: 2px solid rgb(56, 56, 56);

    display: flex;
    justify-content: center;
    align-items:flex-end;

}

.typeBox > div{
    margin-bottom: 40px;

}

.typeBox .type > div{
    position: absolute;
    right: 0;
}


.typeBox .petBox{
    display: flex;
    justify-content: space-around;
}

.typeBox .petBox .pet{
    display: flex;
    flex-direction: column;

    cursor:pointer;
}

.type > .typeImage{
    width:80%;
}